<template>
  <div class="register-page">
    <img src="@/assets/背景图.jpg" alt="背景图">
    <div class="form-container">
      <h2>欢迎来到初练小站，如果您已拥有账号，请
        <router-link to="/login">登录</router-link>
      </h2>
      <div class="form-item">
        <label for="avatar">上传头像</label>
        <input type="file" id="avatar" @change="handleFileChange" accept="image/*">
      </div>
      <div class="form-item">
        <label for="nickname">昵称</label>
        <el-input v-model="nickname" placeholder="请输入昵称"></el-input>
      </div>
      <div class="form-item">
        <label for="password">密码</label>
        <el-input type="password" v-model="password" placeholder="请输入密码"></el-input>
      </div>
      <div class="form-item">
        <label for="confirm-password">确认密码</label>
        <el-input type="password" v-model="confirmPassword" placeholder="请确认密码"></el-input>
      </div>
      <div class="form-item">
        <label for="name">姓名</label>
        <el-input v-model="name" placeholder="请输入姓名"></el-input>
      </div>
      <div class="form-item">
        <label for="gender">性别</label>
        <el-select v-model="gender" placeholder="请选择性别">
          <el-option label="男" value="male"></el-option>
          <el-option label="女" value="female"></el-option>
        </el-select>
      </div>
      <div class="form-item">
        <label for="phone">手机号</label>
        <el-input v-model="phone" placeholder="请输入手机号"></el-input>
      </div>
      <div class="form-item">
        <el-button @click="register">注册</el-button>
        <el-button @click="reset">重置</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      avatar: null,
      nickname: '',
      password: '',
      confirmPassword: '',
      name: '',
      gender: 'male',
      phone: ''
    };
  },
  methods: {
    handleFileChange(e) {
      this.avatar = e.target.files[0];
    },
    register() {
      if (this.password !== this.confirmPassword) {
        alert('密码与确认密码不一致');
        return;
      }

      const formData = new FormData();
      formData.append('avatar', this.avatar);
      formData.append('nickname', this.nickname);
      formData.append('password', this.password);
      formData.append('name', this.name);
      formData.append('gender', this.gender);
      formData.append('phone', this.phone);

      axios.post('/api/register', formData)
          .then(response => {
            // 注册成功处理逻辑
            if (response.data.success) {
              const confirm = window.confirm('注册成功！是否前往“登录”页面？');
              if (confirm) {
                this.$router.push('/login'); // 跳转到登录页面
              }
            } else {
              alert(response.data.message);
            }
          })
          .catch(error => {
            // 注册失败处理逻辑
            alert('注册失败：' + error.message);
          });
    },
    reset() {
      this.avatar = null;
      this.nickname = '';
      this.password = '';
      this.confirmPassword = '';
      this.name = '';
      this.gender = 'male';
      this.phone = '';
    }
  }
};
</script>

<style>
.register-page {
  position: relative;
  height: 100vh;
}

.register-page img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  margin: 50px;
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.form-item label {
  width: 100px;
  margin-right: 20px;
}

.form-item el-input,
.form-item el-select {
  flex: 1;
}

.form-item el-button {
  margin-top: 20px; /* 将注册按钮和重置按钮下移更多距离 */
}
</style>

